<template>
  <view class="my-page">
    <view class="avatar-bg">
      <view class="bg" />
      <view class="user-info">
        <up-avatar
          :src="usrAvatar"
          size="151rpx"
          @tap="userAvatarHandleClick"
        />
        <view class="user-info-name">
          <text class="name">
            {{ usrName }}
          </text>
        </view>
      </view>
    </view>
    <view class="user-panel">
      <view class="user-panel-top">
        <view class="user-panel-top__orders" @tap="toOrderCenter">
          <up-icon :name="iconGroup.myOrder" size="31rpx" />
          <text class="text">我的订单</text>
          <up-badge
            type="error"
            :value="orderMsgTotal"
            :absolute="true"
            :offset="['-10', '80']"
          />
        </view>
        <view class="user-panel-top__applications" @tap="toAppointmentRecords">
          <up-icon :name="iconGroup.application" size="31rpx" />
          <text class="text">我的预约</text>
          <up-badge
            type="error"
            :value="recordMsgTotal"
            :absolute="true"
            :offset="['-10', '80']"
          />
        </view>
      </view>
      <view class="user-panel-bottom">
        <view
          class="user-panel-bottom__item"
          v-for="(item, index) in userPanelServeDataList"
          :key="index"
          @tap="handleUserPanelClick(item)"
        >
          <up-icon :name="item.iconUrl" size="58rpx" />
          <text class="text">
            {{ item.serveName }}
          </text>
        </view>
      </view>
    </view>
    <view class="my-house-panel">
      <text class="title"> 我的家 </text>
      <up-cell-group :border="false">
        <up-cell
          v-for="(item, index) in myHousePanelDataList"
          :key="index"
          :title="item.cellName"
          is-link
          arrow-direction="right"
          @tap="handleMyHousePanelCLick(item.cellName)"
        >
          <template #icon>
            <up-icon size="44rpx" :name="item.iconUrl"></up-icon>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <custom-bottom-bar :id="barId" :cur-tab-value="2" />
  </view>
</template>
<script setup>
import { ref, inject, computed } from "vue";
import customBottomBar from "@/package_kuafu_apartment/pages/components/custom-bottom-bar";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getRecordMsgStatusApi } from "@/package_kuafu_apartment/pages/api/appointment-records";
import { getLeaseOrderMsgCountApi } from "@/package_kuafu_apartment/pages/api/order";
import { getUserInfoApi } from "@/api/public";
import { generateRandomNumId, getCurrentPagesTotal } from "@/utils/utils";
import { upLoadAvatarApi } from "@/api/user";
import { customNav } from "@/utils/customNav";

const imageUrlPrefix = inject("baseImgUrl");
const usHasRealNameAuth = ref(false);

const iconGroup = {
  myOrder: `${imageUrlPrefix}2024-04-22/1713772667908wodedingdan@2x.png`,
  application: `${imageUrlPrefix}2024-04-22/1713772850324jilu@2x.png`,
};

const userPanelServeDataList = [
  {
    serveName: "账单",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713773955014zhangdan@2x.png`,
  },
  {
    serveName: "报修",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713774020192lianxidianhua@2x.png`,
  },
  {
    serveName: "优惠券",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713774066562优惠卷@2x.png`,
  },
  {
    serveName: "消息",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713774100214tongzhi@2x.png`,
  },
];

const myHousePanelDataList = [
  {
    cellName: "我的房屋",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713775842354wodefangwu 拷贝@2x.png`,
  },
  // {
  //   cellName: "同住人登记",
  //   iconUrl: `${imageUrlPrefix}2024-04-22/1713775902835ruhuishenqing 拷贝@2x.png`,
  // },
  {
    cellName: "车辆绑定",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713775961042cheliangbangding 拷贝@2x.png`,
  },
  {
    // cellName: "夸父社区",
    cellName: "荣耀社区",
    iconUrl: `${imageUrlPrefix}2024-04-22/1713776026007shequ 拷贝@2x.png`,
  },
];

const toOrderCenter = () => {
  customNav("pages/order-center/index");
};

const toAppointmentRecords = () => {
  customNav("pages/appointment-records/index");
};

const handleUserPanelClick = (ev) => {
  const { serveName } = ev;
  switch (serveName) {
    case "账单":
      customNav("pages/my-bill/index");
      break;
    case "报修":
      customNav("pages/my-bill/repair");
      break;
    default:
      uni.showToast({
        title: "待开发",
        icon: "error",
      });
      break;
  }
};

const handleMyHousePanelCLick = (e) => {
  console.log(e);
  switch (e) {
    case "我的房屋":
      customNav("pages/house/house");
      break;
    case "同住人登记":
      customNav("pages/cohabitation/x");
      break;
    case "车辆绑定":
      customNav("pages/vehicle-binding/index");
      break;

    default:
      uni.showToast({
        title: "待开发",
        icon: "error",
      });
      break;
  }
};
const recordMsgTotal = ref(0);
const getRecordMsgStatus = async () => {
  const res = await getRecordMsgStatusApi();
  const { code, data } = res;
  if (code === 200) {
    recordMsgTotal.value = data;
  }
};
const orderMsgTotal = ref(0);
const msgTotalData = ref({});
const getLeaseMsgCount = async () => {
  const res = await getLeaseOrderMsgCountApi();
  const { code, data } = res;
  if (code === 200) {
    orderMsgTotal.value = data.total;
    msgTotalData.value = { ...data };
  }
};
const usrName = ref("");
const usrAvatar = ref("");
const getUsrInfo = async () => {
  const res = await getUserInfoApi();
  const { code, data } = res;
  if (code === 200) {
    const { nickname, avatar } = data;
    usrName.value = nickname;
    usrAvatar.value = avatar;
  }
};
const userAvatarHandleClick = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: async (res) => {
      const { tempFilePaths } = res || {};
      const tempFile = tempFilePaths[0];
      uni.uploadFile({
        url: "/ht-user/user/upload",
        filePath: tempFile,
        name: "file",
        formData: {
          type: 2,
        },
        success: (res) => {
          const { statusCode, data } = res;
          if (statusCode === 200) {
            const parseData = JSON.parse(data);
            uploadAvatar(parseData.data);
          }
        },
      });
    },
  });
};
const uploadAvatar = async (imgPath) => {
  const params = {
    avatar: imgPath,
  };
  const res = await upLoadAvatarApi(params);
  const { code } = res;
  if (code === 200) {
    await getUsrInfo();
    await uni.showToast({
      title: "头像更换成功",
      icon: "success",
      duration: 2000,
    });
  }
};
const barId = ref("");
onShow(() => {
  barId.value = generateRandomNumId(19);
  getRecordMsgStatus();
  getUsrInfo();
  getLeaseMsgCount();
});
</script>
<style scoped lang=less>
@import "./style/index";
</style>
